<template>
  <div class="container">
    <h4>查看招聘信息</h4>
    <table class="edit-table2">
      <tbody>
        <tr>
            <th>招聘职位：</th>
            <td><h3>{{ data.a }}</h3></td>
        </tr>
        <tr>
            <th>企业名称：</th>
            <td>{{ data.b }}</td>
        </tr>
        <tr>
            <th>招聘人数：</th>
            <td>{{ data.e }}</td>
        </tr>
        <tr>
            <th>专业要求：</th>
            <td>{{ data.d }}</td>
        </tr>
        <tr>
            <th>月薪（元）：</th>
            <td>{{ data.c }}</td>
        </tr>
        <tr>
            <th>工作地点：</th>
            <td>{{ data.f }}</td>
        </tr>
        <tr>
            <th>职位描述：</th>
            <td>{{ data.g }}</td>
        </tr>
        <tr>
            <th>招聘要求：</th>
            <td>{{ data.h }}</td>
        </tr>
        <tr>
            <th>其他说明：</th>
            <td>无</td>
        </tr>
      </tbody>
    </table>
    <h6>企业联系信息</h6>
    <table class="edit-table3">
      <tbody>
        <tr>
          <th>联系人：</th>
          <td>{{ data.i }}</td>
          <th>联系方式：</th>
          <td>{{ data.j }}、{{ data.k }}</td>
        </tr>
      </tbody>
    </table>
    <p>
      <span :class="{active: data.isActive}">{{ data.content }}</span>
      <button class="one" @click="bbb()">{{ data.btnContent }}</button>
      <button class="two" @click="ccc()">取消</button>
    </p>
  </div>

</template>

<script setup>
import {onMounted, reactive} from 'vue'

//引入store钩子
import useCounterStore from '@/stores/counter.js'
//实现仓库数据双向绑定
import {storeToRefs} from 'pinia'
import router from '../router';

import axios from 'axios';


//创建仓库对象
const store=useCounterStore()
let {table, inviteNum, homeIndex}=storeToRefs(store)

let id

const data = reactive({
  id: inviteNum,
  a: "",
  b: "",
  c: "",
  d: "",
  e: "",
  f: "",
  g: "",
  h: "",
  i: "",
  j: "",
  k: "",
  l: "无",

  isActive: false,
  content: "未报名",
  btnContent: "报名",

  isjob: ""
})


const getWhatJob = ()=> {
  axios.get(`http://127.0.0.1:9001/test/what_job.php?id=${data.id}`).then(re=> {
    // console.log(re.data);
    const item = re.data[0]

    id = item.id
    data.a = item.job
    data.b = item.company
    data.c = item.people
    data.d = item.grade
    data.e = item.money
    data.f = item.where
    data.g = item.dowhat
    data.h = item.havewhat
    data.i = item.hr
    data.j = item.phone
    data.k = item.email
    data.isjob = item.submit

    item.submit.match(localStorage.getItem("token")) && (data.isActive = true)

    data.content = data.isActive ? "已报名" : "未报名"
    data.btnContent = data.isActive ? "取消报名" : "报名"

  }).catch(e=> {
    console.log(e);
  })

}

const bbb = ()=> {
  data.isActive = !data.isActive;

  data.isjob = data.isActive ? data.isjob+localStorage.getItem("token") : data.isjob.replace(localStorage.getItem("token"), "")

  axios.get(`http://127.0.0.142:9001/test/what_job_submit.php?id=${data.id}&submit=${data.isjob}`).then(re=> {
    // console.log("success");
    // console.log(re.data);
  }).catch(e=> {
    console.log(e);
  })

  data.content = data.isActive ? "已报名" : "未报名"
  data.btnContent = data.isActive ? "取消报名" : "报名"
}

const ccc = ()=> {
  router.go(-1)
  homeIndex.value = "招聘模块"
}

onMounted(()=> {
  getWhatJob()

})

</script>

<style scoped>
.container {
  margin-top: 30px;
  background: #eee;
  padding: 10px 20px;
  border-radius: 16px;
}
.container .edit-table2 th {
  width: 15%;
  text-align: right;
  font-weight: normal;
  border: 1px solid #ddd;
  border-left: none;
  margin: 0px;
  padding: 0px 4px;
  height: 32px;
  line-height: 32px;
  background-color: #fafafa;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
}
.container .edit-table2 td {
  width: 85%;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px 8px;
}


h6 {
  margin: 20px 0 0;
}
.container .edit-table3 th {
  width: 165px;
  text-align: right;
  font-weight: normal;
  border: 1px solid #ddd;
  border-left: none;
  margin: 0px;
  padding: 0px 4px;
  height: 32px;
  line-height: 32px;
  background-color: #fafafa;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
}
.container .edit-table3 td {
  max-width: 300px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px 8px;
}

p {
  text-align: center;
  margin-top: 30px;
}
p span.active {
  color: red;
}
p button.one {
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: #29CEA6;
  border-radius: 3px;
  padding: 0 7px;
  color: #fff;
  margin: 0 10px;
}
p button.one:hover {
  background: linear-gradient(rgb(246, 200, 72), rgb(227, 152, 8));
}
p button.two {
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 3px;
  padding: 0 7px;
  color: #000;
}
p button.two:hover {
  background: linear-gradient(to bottom, #f8f8f8, #cccccc);
}

@media (max-width: 767px) {
  table {
    font-size: 12px;
  }
}

</style>